<template>
    <div class="setComponent">
        <div class="form-item">
            <label>轮播图设置</label>
            <el-button size="small" type="primary" @click="uploadClick">上传图片</el-button>
        </div>
        <div class="form-item">
            <label>轮播图高度/px</label>
            <input type="text" v-model="obj.height">
        </div>
        <div class="form-item">
            <label>是否显示缩略图</label>
            <el-switch
                v-model="obj.ifThumbs"
            />
        </div>
        <div class="form-item">
            <label>环路模式</label>
            <el-switch
                v-model="obj.swiperOptionTop.loop"
            />
        </div>
        <div class="form-item">
            <label>是否显示左右箭头</label>
            <el-switch
                v-model="obj.ifArrow"
            />

        </div>
        <div class="form-item">
            <label>自动轮播</label>
            <el-switch
                v-model="obj.swiperOptionTop.autoplay"
            />
        </div>
        <div class="form-item">
            <label>切换效果</label>
            <el-select v-model="obj.swiperOptionTop.effect" placeholder="请选择">
                <el-option
                    v-for="(item,index) in effectOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>网格分步</label>
            <input type="text" v-model="obj.swiperOptionTop.slidesPerView">
        </div>

    </div>
</template>
<script>
export default {
    name: 'Swiper',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            dialogVisible: false,
            effectOptions: [
                {
                    label: '默认',
                    value: 'slide'
                },
                {
                    label: '淡入',
                    value: 'fade'
                },
                {
                    label: '方块',
                    value: 'cube'
                },
                {
                    label: '3d流',
                    value: 'coverflow'
                },
                {
                    label: '3d翻转',
                    value: 'flip'
                }
            ]
        }
    },
    methods: {
        uploadClick() {
            this.$emit('uploadClick', this.obj)
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

